@use "sass:selector";
@use "sass:string";

.wrapper {
    display: flex;
    flex-direction: column;
}

.content {
    flex-grow: 1;
    position: relative;
}

ul.navigationList {
    list-style: none;
    display: flex;
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: solid thin #f0f0f0;

    li {
        flex: 1;
        min-width: 100px;
    }

    li>div.tabHeaderButton {
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: solid 2px transparent;
        transform: translateY(1px);
        padding: 9px;
        color: rgba(0, 0, 0, 0.8);
        cursor: pointer;


        transition: background-color 0.2s ease-out,
        color .2s ease-out;
        &.default:hover {
            color: rgb(24, 144, 255);
            background: hsla(0, 0%, 50%, 0.03);
        }

        &.active {
            color: rgb(24, 144, 255);
            background-color: rgba(0, 185, 255, 0.09);
            border-bottom-color: rgb(48, 152, 232);
        }

        &.disabled {
            opacity: 0.25; // color: rgba(0, 0, 0, 0.25);
            cursor: default;
        }

        &.extra {
            flex: 1 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            background: red;

            &:empty,
            &:blank {
                display: none;
            }
        }
    }

}